<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #demo{
        width: 500px;
        height: 500px;
        background-color: red;
    }

    #test{
        width: 300px;
        height: 300px;
        background-color: green;
    }
</style>
<body>
    <div id="demo">
        <div id="test"></div>
    </div>
</body>
</html>

<script>

    /* 
        事件冒泡 从里面一层一层往外走，同时也会触发父级事件
        事件捕获 从外一层一层往内走，同时也会触发事件

        事件捕获 > 事件冒泡
    */
    let demo = document.getElementById('demo');
    let test = document.getElementById('test');

    // test.onclick = function()
    // {
    //     alert('test事件');
    // }

    // demo.onclick = function()
    // {
    //     alert('demo事件');
    // }

    // document.body.onclick = function()
    // {
    //     alert('body事件');
    // }

    // addEventListener => 事件监听 同一个元素同一个事件可以多次触发
    document.body.addEventListener("click", function (e) {
      console.log("click-body");
    }, false);

    demo.addEventListener("click", function (e) {
      console.log("click-demo---事件传播");
    }, false);

    // 新增事件捕获事件代码
    demo.addEventListener("click", function (e) {
      console.log("click-demo--事件捕获");
    }, true);

    // 新增事件捕获事件代码
    document.body.addEventListener("click", function (e) {
      console.log("click-body--事件捕获");
    }, true);

    test.addEventListener("click", function (e) {
      console.log("click-test");
    }, false);
</script>